<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-modal
        v-model:visible="visible"
        :footer="false"
        :mask="false"
        @cancel="close"
        draggable
    >
        <template #title>{{ $t('basics.daoru') }} </template>
        <div style="padding: 0 20px">
            <div v-show="props.isShowType" class="flex items-center mb-5">
                <div style="margin-right: 16px">
                    {{ $t('basics.TemplateName') }}
                </div>
                <a-input
                    style="flex: 1"
                    v-model="reply_type"
                    :placeholder="$t('basics.TemplateName')"
                />
            </div>
            <a-upload
                draggable
                :custom-request="upload"
                :show-file-list="true"
                accept=".xlsx,.xls"
                :show-cancel-button="false"
                :limit="1"
                v-model:file-list="fileList"
            >
                <template #upload-button>
                    <div style="" class="rounded text-center py-14 px-7 p-5">
                        <div class="flex flex-col items-center">
                            <!-- <icon-upload class="text-5xl text-gray-400" /> -->
                            <img
                                class="text-[0px] w-[56px] h-[56px]"
                                src="@/assets/images/ic_daoru.png"
                            />
                            <div class="text-red-600 font-bold py-4">
                                {{ $t('basics.daoruexcel') }}
                            </div>
                            <div class="flex">
                                {{ $t('basics.wenjiantuoru')
                                }}<span style="color: #3370ff">{{
                                    $t('basics.dianjishangchuan')
                                }}</span
                                >{{ $t('basics.zhinengshangchuan') }}
                            </div>
                        </div>
                    </div>
                </template>
            </a-upload>

            <div v-if="props.isShowLoad" class="mt-5 italic text-right">
                <a-link @click="sendDownload">{{ $t('basics.coazai') }}</a-link>
            </div>
            <div
                class="dialog-foot mp-5"
                style="text-align: end; margin-top: 10px"
            >
                <a-button class="mr20" @click="concel">{{
                    $t('basics.concel')
                }}</a-button>
                <a-button type="primary" @click="exporthandleOk"
                    ><a-link :hoverable="false">{{
                        $t('basics.sure')
                    }}</a-link></a-button
                >
            </div>
        </div>
    </a-modal>
</template>

<style scoped>
::v-deep .arco-input-wrapper:focus-within,
.arco-input-wrapper.arco-input-focus {
    background: rgba(0, 0, 0, 0);
}
</style>
<script setup>
import { ref } from 'vue';
import commonApi from '@/api/common';
import tool from '@/utils/tool';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
let reply_type = ref('');
const fileList = ref([]);
const visible = ref(false);
const selectList = ref([
    {
        value: 1,
        label: t('basics.FirstSentenceReply')
    },
    {
        value: 2,
        label: t('basics.SecondSentenceReply')
    },

    {
        value: 0,
        label: t('basics.BeCommon')
    }
]);
const props = defineProps({
    upLoadData: {
        type: Object,
        default: {
            url: '', // 上传路径
            params: {} // 参数
        }
    },
    downLoadData: {
        type: Object,
        default: {
            url: '', // 下载路径
            params: {} // 参数
        }
    },
    isShowType: {
        type: Boolean,
        default: false
    },
    isShowLoad: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['success']);

const open = () => (visible.value = true);
const close = () => (visible.value = false);

const upload = (fileOption) => {};
const exporthandleOk = () => {
    if (reply_type.value) {
        Message.info(t('basics.wnjianshangchuan'));
        const dataForm = new FormData();
        //   console.log(reply_type.value,'-=-=',)
        // props.upLoadData.props.reply_type=reply_type.value
        const { url, params } = props.upLoadData;

        console.log(params);
        for (const key in params) {
            if (Object.hasOwnProperty.call(params, key)) {
                const element = params[key];
                dataForm.append(key, element);
            }
        }
        dataForm.append('file', fileList.value[0].file);
        if (props.isShowType) {
            dataForm.append('template_name', reply_type.value);
        }
        commonApi.importExcel(url, dataForm).then(async (res) => {
            res.success &&
                Message.success(res.message || t('basics.daoruchenggong'));
            emit('success');
            close();
        });
    } else {
        Message.success('模板名称不能为空');
    }
};
const concel = () => {
    fileList.value = [];
    close();
};
const sendDownload = () => {
    Message.info(t('basics.qingqiuxiazai'));
    const { url, params } = props.downLoadData;
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        commonApi.download(url).then((res) => {
            tool.download(res);
            Message.success(t('basics.qingqiuchenggong'));
        });
    }
};

defineExpose({ open, close });
</script>

<style scoped lang="less">
::v-deep .arco-modal {
    background: @modal-bg-color;
}
::v-deep .arco-upload-list-item-content {
    //#333c4a
    background: @imp-input-bg-color;
}
::v-deep .arco-upload-list-item-name {
    //1d2129
    color: @imp-input-color;
}
::v-deep
    .arco-upload-list-item
    .arco-upload-progress:hover
    .arco-progress-circle-bg {
    cursor: pointer;
    stroke: @imp-close-color;
}
</style>
